<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-cache/no-store" />
  <!--[if IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
  <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
  <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
  <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
  <link rel="stylesheet" type="text/css" href="leftAndRight/list-style.css" />
  <style>
    .input-text {
      width: 140px;
    }

    .container {
      width: 50%;
      height: 100%;
      overflow: auto;
      float: left;
      position: fixed;
      cursor: pointer;
    }

    .queryTable {
      align-left: 50%;
      width: 45%;
      float: right;
      cursor: pointer;
    }

    /**当设备宽度小于980时*/
    @media screen and (max-width:980px) {
      .queryTable {
        display: none;
      }

      .container {
        width: 100%;
      }
    }

    h3,
    h4,
    table {
      text-align: center
    }

    .list-title {
      width: 98%;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      border-bottom: 1px solid #adadad;
      cursor: move;
      color: #fff;
      background: #1E90FF;
    }

    .list-body .left-box2,
    .list-body .left-box-add,
    .list-body .right-box2,
    .list-body .right-box-add {
      width: 39%;
      border: 1px solid #ceadad;
      border-radius: 3px;
      margin: 10px 10px;
      background: #fff;
    }

    #attendDevice,
    #modalAttendDevice{
      white-space:normal;
      word-wrap: break-word;
      height: auto;
    }

  </style>
  <!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
  <title>职员表</title>
</head>

<body>
  <div class="container">
    <table id="table" class="table table-bg table-hover table-border">
      <tr>
        <th>职员表</th>
        <td></td>
      </tr>
      <tr>
        <td>编号</td>
        <td>
          <input id="personId" type="text" class="input-text" disabled="disabled" />
          <span id="addPersonModalBtn" class="btn btn-primary radius" data-toggle="modal" data-target="#addPersonModal">添加职员</span>
        </td>
      </tr>
      <tr>
        <td>工号</td>
        <td>
          <input id="workerNo" type="text" class="input-text" />
        </td>
      </tr>
      <tr>
        <td>职员头像</td>
        <td>
          <div id="update_person_icon"></div>
          <input type="text" name="update_person_img_val" hidden>
        </td>
      </tr>
      <tr>
        <td>职员姓名</td>
        <td>
          <select id="personName" class="input-text"></select>
        </td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <select id="gender" class="input-text">
            <option value=''>请选择</option>
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>状态</td>
        <td>
          <select id="status" class="input-text">
            <option>请选择</option>
            <option>开启</option>
            <option>禁用</option>
            <option>离职</option>
          </select>
        </td>
      </tr>
      <tr id="dismissionTr" hidden>
        <td>离职原因</td>
        <td>
          <input id="dismissionReason" type="text" class="input-text" style="width:200px;" placeholder="不大于100个字符" />
        </td>
      </tr>
      <tr id="dismissionDateTr" hidden>
        <td>离职日期</td>
        <td><input id="dismissionDate" type="text" class="input-text" disabled="disabled" /></td>
      </tr>
      <tr>
        <td>部门名称</td>
        <td>
          <select id="deptName" class="input-text"></select>
        </td>
      </tr>
      <tr>
        <td>所属车间</td>
        <td>
          <select id="workshopName" class="input-text"></select>
        </td>
      </tr>
      <tr>
        <td>职务</td>
        <td>
          <select id="duty" class="input-text">
            <option value=''>请选择</option>
            <option value="1">经理</option>
            <option value="2">主管</option>
            <option value="3">职员</option>
            <option value="跟单">跟单</option>
            <option value="统计">统计</option>
            <option value="自定义">自定义</option>
          </select>
          <input id="custom" placeholder="10字以内" type="text" class="input-text" style="display:none;" />
        </td>
      </tr>
      <tr>
        <td>身份证号码</td>
        <td>
          <input id="IDNumber" type="text" class="input-text" />
        </td>
      </tr>
      <tr>
        <td>手机号</td>
        <td>
          <input id="phoneNumber" type="text" class="input-text" />
        </td>
      </tr>
      <tr>
        <td>邮箱</td>
        <td>
          <input id="mailBox" type="text" class="input-text" />
        </td>
      </tr>
      <tr>
        <td>微信编号</td>
        <td>
          <input id="weChatNumber" type="text" class="input-text" />
        </td>
      </tr>
      <tr>
        <td>工资计算方式</td>
        <td>
          <select id="method" class="input-text">
            <option>请选择</option>
            <option>按月</option>
            <option>计件</option>
            <option>保底加计件</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>月薪</td>
        <td>
          <input id="monthlySalary" class="input-text" type="text" />
        </td>
      </tr>
      <tr>
        <td>考勤机</td>
        <td>
          <button id="attendDevice" name="openModalBtn" class="btn btn-secondary radius">请选择</button>
        </td>
      </tr>
      <tr>
        <td>最高学历</td>
        <td>
          <select id="highestEducation" class="input-text">
            <option value=-1>请选择</option>
            <option value=1>初中及以下</option>
            <option value=2>高中</option>
            <option value=3>中专</option>
            <option value=4>大专</option>
            <option value=5>本科</option>
            <option value=6>硕士</option>
            <option value=7>博士</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>专业</td>
        <td>
          <input id="major" type="text" class="input-text" placeholder="" />
        </td>
      </tr>
      <tr>
        <td>英语水平</td>
        <td>
          <select id="englishLevel" class="input-text">
            <option value=-1>请选择</option>
            <option value=0>无</option>
            <option value=1>初级</option>
            <option value=2>四级（CET-4）</option>
            <option value=3>六级（CET-6）</option>
            <option value=4>专业四级（TEM-4）</option>
            <option value=5>专业八级（TEM-8）</option>
          </select>
        </td>
      </tr>
      <tr class="skill">
        <td>职业技能</td>
        <td>
          <input type="text" class="skill-name input-text" placeholder="技能名称" />
          <label> 等级：</label>
          <select class="skill-level input-text">
            <option value=-1>请选择</option>
            <option value=0>无</option>
            <option value=1>初级</option>
            <option value=2>中级</option>
            <option value=3>高级</option>
            <option value=4>特级</option>
          </select>
          <input id="addSkill" type="button" class="btn btn-secondary-outline radius size-S" value="新增技能" />
        </td>
      </tr>
      <tr>
        <td>社保类型</td>
        <td>
          <select id="socialSecurity" class="input-text">
            <option value=-1>请选择</option>
            <option value=1>自理</option>
            <option value=2>公司办理</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>入职日期</td>
        <td>
          <input id="hiredate" name="datePick" type="text" class="input-text Wdate" style="" placeholder=""
            onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})" />
        </td>
      </tr>
      <tr>
        <td>合同截止日期</td>
        <td>
          <input id="cancellingDate" name="datePick" type="text" class="input-text Wdate" style="" placeholder=""
            onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})" />
        </td>
      </tr>
      <tr>
        <td>创建人</td>
        <td>
          <input id="creater" type="text" class="input-text" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>创建时间</td>
        <td>
          <input id="creationTime" type="text" class="input-text" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>上一次修改人</td>
        <td>
          <input id="lastModifier" type="text" class="input-text" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>上一次修改时间</td>
        <td>
          <input id="lastModifyTime" type="text" class="input-text" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>序号</td>
        <td>
          <input id="sort" type="text" class="input-text" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <button id="reportBtn" class="btn btn-primary radius">修改</button>
        </td>
      </tr>
    </table>
  </div>
  <div class="queryTable">
    <input id="search-text" type="text" class="input-text" placeholder="工号/姓名/部门/车间" style="width:160px;" />
    <button id="search-btn" class="btn btn-primary radius">搜索</button>
    <button id="view" class="btn" value='1'>切换状态查看</button>
    <table id="queryPersonnelTable" class="table table-gb table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>工号</th>
          <th>职员姓名</th>
          <th>部门</th>
          <th>车间</th>
          <th>职务</th>
          <th>性别</th>
          <th>状态</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- 模态框 默认隐藏 -->
  <div id="addPersonModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="materialModal" aria-hidden="true">
    <div class="modal-dialog" style="margin-bottom:0px;">
      <div class="modal-content">
        <!-- 内容 -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h2 class="modal-title" id="addPersonModalLabel" style="font-size:22px;">添加职员</h2>
        </div>
        <div class="modal-body" style="height:calc(90vh - 178px);overflow:auto;">
          <table class="table table-bg table-hover table-border">
            <tr>
              <td>工号</td>
              <td>
                <input name="modelWorkerNo" class="input-text" type="text" />
              </td>
            </tr>
            <tr>
              <td>职员姓名</td>
              <td>
                <input id="modalPersonName" class="input-text" type="text" />
              </td>
            </tr>
            <tr>
              <td>职员头像</td>
              <td>
                <div id="add_person_icon"></div>
                <input type="text" name="add_person_img_val" hidden>
              </td>
            </tr>
            <tr>
              <td>性别</td>
              <td>
                <select id="modalGender" class="input-text">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>部门名称</td>
              <td>
                <select id="modalDeptName" class="input-text"></select>
              </td>
            </tr>
            <tr>
              <td>所属车间</td>
              <td>
                <select id="modalWorkshopName" class="input-text"></select>
              </td>
            </tr>
            <tr>
              <td>职务</td>
              <td>
                <select id="modalDuty" class="input-text">
                  <option value=''>请选择</option>
                  <option value="1">经理</option>
                  <option value="2">主管</option>
                  <option value="3">职员</option>
                  <option value="跟单">跟单</option>
                  <option value="统计">统计</option>
                  <option value="自定义">自定义</option>
                </select>
                <input id="modalCustom" type="text" class="input-text" style="width:100px;display:none;" />
              </td>
            </tr>
            <tr>
              <td>身份证号码</td>
              <td>
                <input id="modalIDNumber" type="text" class="input-text" />
              </td>
            </tr>
            <tr>
              <td>手机号</td>
              <td>
                <input id="modalPhoneNumber" type="text" class="input-text" />
              </td>
            </tr>
            <tr>
              <td>邮箱</td>
              <td>
                <input id="modalMailBox" type="text" class="input-text" />
              </td>
            </tr>
            <tr>
              <td>微信编号</td>
              <td>
                <input id="modalWeChatNumber" type="text" class="input-text" />
              </td>
            </tr>
            <tr>
              <td>工资计算方式</td>
              <td>
                <select id="modalMethod" class="input-text">
                  <option>按月</option>
                  <option>计件</option>
                  <option>保底加计件</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>月薪</td>
              <td>
                <input id="modalMonthlySalary" class="input-text" type="text" />
              </td>
            </tr>
            <tr>
              <td>考勤机</td>
              <td>
                <button id="modalAttendDevice" name="openModalBtn" class="btn btn-secondary radius">请选择</button>
              </td>
            </tr>
            <tr>
              <td>最高学历</td>
              <td>
                <select id="modalHighestEducation" class="input-text">
                  <option value=-1>请选择</option>
                  <option value=1>初中及以下</option>
                  <option value=2>高中</option>
                  <option value=3>中专</option>
                  <option value=4>大专</option>
                  <option value=5>本科</option>
                  <option value=6>硕士</option>
                  <option value=7>博士</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>专业</td>
              <td>
                <input id="modalMajor" type="text" class="input-text" placeholder="" />
              </td>
            </tr>
            <tr>
              <td>英语水平</td>
              <td>
                <select id="modalEnglishLevel" class="input-text">
                  <option value=-1>请选择</option>
                  <option value=0>无</option>
                  <option value=1>初级</option>
                  <option value=2>四级（CET-4）</option>
                  <option value=3>六级（CET-6）</option>
                  <option value=4>专业四级（TEM-4）</option>
                  <option value=5>专业八级（TEM-8）</option>
                </select>
              </td>
            </tr>
            <tr class="skill">
              <td>职业技能</td>
              <td>
                <input type="text" class="skill-name input-text" placeholder="技能名称" />
                <label> 等级：</label>
                <select class="skill-level input-text">
                  <option value=-1>请选择</option>
                  <option value=0>无</option>
                  <option value=1>初级</option>
                  <option value=2>中级</option>
                  <option value=3>高级</option>
                  <option value=4>特级</option>
                </select>
                <input id="modalAddSkill" type="button" class="btn btn-secondary-outline radius size-S" value="新增技能" />
              </td>
            </tr>
            <tr>
              <td>社保类型</td>
              <td>
                <select id="modalSocialSecurity" class="input-text">
                  <option value=-1>请选择</option>
                  <option value=1>自理</option>
                  <option value=2>公司办理</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>入职日期</td>
              <td>
                <input id="modalHiredate" name="datePick" type="text" class="input-text Wdate" style="" placeholder=""
                  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})" />
              </td>
            </tr>
            <tr>
              <td>合同截止日期</td>
              <td>
                <input id="modalCancellingDate" name="datePick" type="text" class="input-text Wdate" style="" placeholder=""
                  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})" />
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button id="add" type="button" class="btn btn-primary">添加</button>
        </div>
      </div>
    </div>
  </div>
  <div id="effectiveTimeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="effectiveTimeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="effectiveTimeModalLabel">生效时间设置</h4>
        </div>
        <div class="modal-body">
          <table>
            <thead>
              <tr>
                <th>字段名称</th>
                <th>修改之前</th>
                <th>修改之后</th>
                <th>生效日期</th>
              </tr>
            </thead>
            <tbody id="effectiveTimeModalBody">

            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消修改</button>
          <button id="confirm" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
  <div id="deviceUserModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-bottom:0px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <span class="modal-title" id="deviceUserModalLabel">选择考勤机</span>
        </div>
        <div class="modal-body" style="height:calc(90vh - 178px);overflow:auto;">
          <div id="selectTitle" class="list-select ui-draggable">
            <div class="list-title ui-draggable-handle">
              <div style="font-size:16px;text-align:center;">选项可双击、单击进行选择</div>
            </div>
            <div class="list-body">
              <ul class="item-box left-box ui-sortable ui-droppable">
              </ul>
              <div class="center-box">
                <button class="add-one btn btn-success radius" title="添加选中项">&gt;</button>
                <button class="add-all btn btn-success radius" title="添加全部">&gt;&gt;</button>
                <button class="remove-one btn btn-primary radius" title="移除选中项">&lt;</button>
                <button class="remove-all btn btn-primary radius" title="移除全部">&lt;&lt;</button>
              </div>
              <ul class="item-box right-box ui-sortable ui-droppable">
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary radius" data-id="" id="deviceUserModalBtn">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!--_footer 作为公共模版分离出去-->
  <script type="text/javascript" src="https://upload.shinehao.com.cn/20180810145355jquery.min1.9.1.js"></script>
  <script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
  <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
  <script type="text/javascript" src="https://upload.shinehao.com.cn/20180810150731H-ui.min3.0.2.js"></script>
  <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
  <script type="text/javascript" src="https://upload.shinehao.com.cn/20180813175723jquery.dataTables1.10.0.js"></script>
  <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
  <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
  <script type="text/javascript" src="lib/singlepicupload/upload.js"></script>
  <script type="text/javascript" src="https://upload.shinehao.com.cn/20180809103833lodash.js"></script> 
  <script type="text/javascript" src="myJs/util.js"></script>
  <!--/_footer 作为公共模版分离出去 -->

  <!--请在下方写此页面业务相关的脚本 -->
  <script type="text/javascript" src="myJs/personnelList.js"></script>
</body>

</html>
